<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刘昊然的空间网页</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.over {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				z-index: 100;
			}

			.tempContainer {
				position: fixed;
				width: 100%;
				margin-right: 0px;
				margin-left: 0px;
				text-align: center;
				z-index: 101;
			}

			.first {
				display: block;
				width: 1900px;
				height: 130px;
				background: #000000;
			}

			.first img {
				height: 110px;
				width: 220px;
				float: left;
				margin-left: 100px;
				margin-top: 10px;
			}

			.first img:link {}



			.first ul {
				width: 480px;
				height: 130px;
				list-style: none;
				margin-right: 150px;
				float: right;
			}

			.first ul li {
				float: left;
				width: 80px;
				line-height: 130px;
			}

			.first ul li a:visited {
				color: white;
			}

			.first ul li a:link {

				text-decoration: blink;
				font: 18px "Microsoft YaHei";
				color: white;
			}

			.first ul li a:hover {
				font: 20px "Microsoft YaHei";
				color: chocolate;
			}

			.fifth {
				width: 1900px;
				display: block;
				height: 500px;
				background: #000000;
			}

			.fifth_1 {
				display: block;
				height: 250px;
			}

			.fifth_1_1 {
				float: left;
				margin-left: 100px;
				margin-top: 100px;
				width: 400px;
			}

			.fifth_1_2 {
				float: left;
				margin-top: 100px;
				width: 400px;
			}

			h3 {
				font: 24px "楷体";
				color: white;
				padding-bottom: 10px;
				margin-bottom: 0px;
			}

			.fifth_1_1 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_1 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}

			.fifth_1_1 ul li span:hover {
				color: aqua;
			}


			.fifth_1_1 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}

			.fifth_1_2 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_2 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}

			.fifth_1_2 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}

			.fifth_1_2 ul li span:hover {
				color: aqua;
			}


			.fifth_1_3 {
				margin-top: 100px;
				float: left;
				width: 320px;
				box-sizing: border-box;
			}


			.fifth_1_4 {
				margin-top: 100px;
				float: left;
				width: 400px;
				margin-left: 120px;
				box-sizing: border-box;
			}

			.fifth_1_4 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_4 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}



			.fifth_1_4 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}


			.fifth_1_3 .font_1 {
				margin-top: 10px;
				float: left;
				border-radius: 20px;
				width: 80px;
				text-align: center;
				font: 24px "楷体";
				color: white;
				background: #555555;
			}

			.fifth_1_3 .font_1:hover {
				background: aqua;
			}

			.fifth_1_3 .font_2 {
				margin-top: 10px;
				margin-left: 10px;
				float: left;
				border-radius: 20px;
				width: 100px;
				text-align: center;
				font: 24px "楷体";
				color: white;
				background: #555555;
			}

			.fifth_1_3 .font_2:hover {
				background: aqua;
			}


			.bb1 {
				width: 250px;
				height: 28px;
				margin-top: 20px;
			}

			.search {
				width: 222px;
				height: 28px;
				border: 1px solid #e5e5e5;
				background: #f1f1f1;
				outline: none;
				padding-left: 20px;
				position: absolute;
			}

			.btn {
				width: 28px;
				height: 27px;
				margin-left: 200px;
				margin-top: 1px;
				background-repeat: no-repeat;
				/* 大小 */
				background-size: 28px 28px;
				/* 位置 */
				background-position: center;
				background-image: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/search.png);
				border: none;
				position: absolute;
				cursor: pointer;
			}

			.fifth_2 {
				margin: 0 auto;
				margin-top: 100px;
				height: 8px;
				width: 1500px;
				background: #555555;
			}

			.fifth_3 {
				margin-top: 50px;
				color: white;
				font: 20px "microsoft yahei";
				float: right;
				margin-right: 50px;
			}



			.second {
				width: 1900px;
				height: 665px;
				background: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/背景06.png);
				background-size: 1900px 665px;
				display: block;
				box-sizing: border-box;
			}

			.second ul {
				list-style: none;
			}

			.news {
				margin: 0 auto;
				width: 400px;
				height: 80px;
				display: block;
			}

			.news li {
				line-height: 100px;
				float: left;
				width: 80px;
				text-align: center;
			}

			.news li img {
				width: 50px;
				height:50px;
				background: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/dian.png);
				background-size: 50px 50px;
			}

			.second_1 {
				position: relative;
				margin: 0 auto;
				width: 800px;
				height: 500px;
				background: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/01.png);
				background-size: 800px 500px;
			}

			.second_1 img {
				width: 160px;
				height: 500px;
			}

			.bottom_ul {
				margin: 0 auto;
				width: 800px;
				height: 50px;
				list-style: none;
			}

			.bottom_ul li {
				float: left;
				width: 160px;
					border-radius: 80px;
				background: #D2691E;
				text-align: center;
				line-height: 50px;
			}

			/* .hide{
				display: none;
			} */

			.box1 {
				text-align: center;
				position: absolute;
				float: left;
				width: 160px;
				height: 500px;
				background: #000FFF;
			}

			.box2 {
				text-align: center;
				position: absolute;
				left: 160px;
				width: 160px;
				height: 500px;
				float: left;
				background: #00FF0F;
			}

			.box3 {
				text-align: center;
				position: absolute;
				left: 320px;
				float: left;
				width: 160px;
				height: 500px;
				background: #00FFFF;
			}

			.box4 {
				text-align: center;
				position: absolute;
				left: 480px;
				float: left;
				width: 160px;
				height: 500px;
				background: #1E90FF;
			}

			.box5 {
				text-align: center;
				position: absolute;
				left: 640px;
				float: left;
				width: 160px;
				height: 500px;
				background: #8B4513;
			}

			.hide {
				display: none;
			}
			
				
			.bottom_ul li:hover{
				background: #00FFFF;
				border-radius: 80px;
			}
			
			.news li img:active{
				background: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/点.png);
				background-size: 50px 50px;
			}
			
			.second_1 span{
				font: bold 30px "楷体";	
				
			}
			
			
			/* 
			 */
			
			.zhuan {
				width: 200px;
				height: 200px;
				margin: 200px 400px;
				position: relative;
				list-style: none;
				transform-style: preserve-3d;
				animation: zhuan 16s linear infinite;
				display: inline-block;
			}
			
			@keyframes zhuan {
				from {
					transform:rotateX(20deg) rotateY(0deg);
				}
			
				to {
					transform:rotateX(20deg) rotateY(360deg);
				}
			}
			
			.zhuan li img {
			
				width: 200px;
				height: 200px;
			}
			
			.zhuan li {
				width: 200px;
				height: 200px;
				position: absolute;
				line-height: 200px;
				text-align: center;
				font-size: 50px;
			}
			
			
			.zhuan li:nth-child(1) {
				transform: rotateY(60deg) translateZ(200px);
			}
			
			.zhuan li:nth-child(2) {
				transform: rotateY(120deg) translateZ(200px);
			}
			
			.zhuan li:nth-child(3) {
				transform: rotateY(240deg) translateZ(200px);
			}
			
			.zhuan li:nth-child(4) {
				transform: rotateY(300deg) translateZ(200px);
			}
			
			.zhuan li:nth-child(5) {
				transform: translateZ(200px);
			}
			
			.zhuan li:nth-child(6) {
				transform: translateZ(-200px);
			}
			
			.second_12{
				float: left;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="first">
			<a href="首页.html"><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/1.01.png" ></a>
			<ul>
				<li><a href="首页.html">主页</a></li>
				<li><a href="我的.html">me</a></li>
				<li><a href="动态.html">动态</a></li>
				<li><a href="图片馆.html">图像馆</a></li>
				<li><a href="博客.html">博客</a></li>
				<li><a href="联系我们.html">联系我们</a></li>
			</ul>
		</div>



		<div class="second">
			<ul class="zhuan">
				<li><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然00.png"></li>
				<li><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然01.png"></li>
				<li><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然02.png"></li>
				<li><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然03.png"></li>
				<li><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然04.png"></li>
				<li><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然05.png"></li>
			</ul>.
			
			<div class="second_12">
				
				<ul class="news">
					<li><img class="news1" ></li>
					<li><img class="news2"></li>
					<li><img class="news3"></li>
					<li><img class="news4" ></li>
					<li><img class="news5"></li>
				</ul>
				<div class="second_1">
					<div class="box1 hide"><span>小清新</span></div>
					<div class="box2 hide"><span>呆萌</span></div>
					<div class="box3 hide"><span>文艺青年</span></div>
					<div class="box4 hide"><span>暖心学长</span></div>
					<div class="box5 hide"><span>艺人</span></div>
				
				</div>
				
				<ul class="bottom_ul">
					<li nn="0">1</li>
					<li nn="1">2</li>
					<li nn="2">3</li>
					<li nn="3">4</li>
					<li nn="4">5</li>
				</ul>
				
			</div>
			
			


		</div>

		<div class="fifth">
			<div class="fifth_1">
				<div class="fifth_1_1">
					<h3>近期活动</h3>
					<ul>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>1.刘昊然的近期行程</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>2.刘昊然去微博之夜</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>3.刘昊然的电视剧发布会</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>4.刘昊然去电影颁奖典礼</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>5.刘昊然20岁生日宴会</span></li></a>
					</ul>
				</div>
				<div class="fifth_1_2">
					<h3>近期评论</h3>
					<ul>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>1.20岁的好多天，依旧不如你聪明</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>2.生日快乐，祝你每天能吃到不一样的果冻。</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>3.怎么样的你我们都满意。生日快乐昊然！</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>4.宝贝生日快乐！要永远开心快乐！</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>5.你忙归忙什么时候有空嫁给我</span></li></a>
		
					</ul>
				</div>
				<div class="fifth_1_3">
					<h3>标签</h3>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_1">小清新</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">呆萌</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">演员</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">艺人</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">长腿欧巴</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">文艺青年</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">暖心学长</div></a>
				</div>
				<div class="fifth_1_4">
					<h3>关于</h3>
					<ul>
						<li><span>想要知道更多</span></li>
					</ul>
					<div class="bb1">
						<input type="text" class="search" placeholder="SEARCH...">
						<a href="https://www.baidu.com/s?wd=%E5%88%98%E6%98%8A%E7%84%B6&rsv_spt=1&rsv_iqid=0xefa9f6080001e09b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101" target="_blank"><input type="text" class="btn"></a>
					</div>
				</div>
			</div>
			<div class="fifth_2">
			</div>
			<div class="fifth_3">
				Copyright © 2019 - 2021 南工院 移动1813 顾兆远版权所有
			</div>
		</div>
	</body>
</html>

<script>
	$(function() {
		$(".bottom_ul li").on("mouseenter", function() {
			$(this).css("cursor", "pointer");
			$(".bottom_ul li").removeClass("selected");
			$(this).addClass("selected");
			var nn = parseInt($(this).attr('nn'));
			$(".second_1").children().addClass('hide');
			$(".second_1").children().eq(nn).removeClass('hide');
		});
		// mouseleave

		$(".bottom_ul li").on("mouseleave", function() {
			$(".second_1").children().addClass('hide');
		});

		$(function() {
			$(".news1").on("click", function() {
				$(".second_1").css("background", "url(https://htmlpicture.oss-cn-beijing.aliyuncs.com/01.png)");
				$(".second_1").css("background-size", "800px 500px");
				

			});
		});
		$(function() {
			$(".news2").on("click", function() {
				$(".second_1").css("background", "url(https://htmlpicture.oss-cn-beijing.aliyuncs.com/02.png)");
				$(".second_1").css("background-size", "800px 500px");
			});
		});
		$(function() {
			$(".news3").on("click", function() {
				$(".second_1").css("background", "url(https://htmlpicture.oss-cn-beijing.aliyuncs.com/03.png)");
				$(".second_1").css("background-size", "800px 500px");
			});
		});
		$(function() {
			$(".news4").on("click", function() {
				$(".second_1").css("background", "url(https://htmlpicture.oss-cn-beijing.aliyuncs.com/04.png)");
				$(".second_1").css("background-size", "800px 500px");
			});
		});
		$(function() {
			$(".news5").on("click", function() {
				$(".second_1").css("background", "url(https://htmlpicture.oss-cn-beijing.aliyuncs.com/刘昊然00.png)");
				$(".second_1").css("background-size", "800px 500px");
			});
		});
		
	});
</script>
